<template>
  <div class="nr">
    <div data-v-31e41a20 class="heder">
      <div data-v-31e41a20 class="operation-item" @click="k1()">取件任务</div>
      <div data-v-31e41a20 class="operation-item" @click="k2()">派件任务</div>
      <div data-v-31e41a20 class="operation-item" @click="k3()">已取消</div>

      <div id="luo1" class="contentvalue" style="display: black">
        <el-form size="mini" label-width="90px">
          <el-row style="margin-top: 10px">
            <el-col :span="8"
              ><el-form-item label="运单编:"
                ><el-input
                  v-model="form.orderWaybillNumber"
                  placeholder="请输入运单编号"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="快递员姓名:">
                <el-input
                  v-model="form.usersUsername"
                  placeholder="请输入快递员姓名"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="发货地址:">
                <el-select
                  v-model="form.orderPaymentStatus"
                  style="width: 100%"
                >
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="已付" value="0"></el-option>
                  <el-option label="未付" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 5px">
            <el-col :span="8"
              ><el-form-item label="发件人姓名:"
                ><el-input
                  v-model="form.orderName"
                  placeholder="请输入发件人姓名"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="作业状态:">
                <el-select v-model="form.taketaskType" style="width: 100%">
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="待提货" value="0"></el-option>
                  <el-option label="在途" value="1"></el-option>
                  <el-option label="已交付" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8"
              ><el-form-item label="选择网点:">
                <el-select v-model="form.selectNet" style="width: 100%">
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="已付" value="0"></el-option>
                  <el-option label="未付" value="1"></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-top: -15px; margin-left: 490px">
              <el-form-item>
                <el-button type="primary" @click="findAll()">查询</el-button>
                <el-button @click="qk()">重置</el-button>
                <el-button>分配快递员</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div id="luo2" class="contentvalue" style="display: none">
        <el-form size="mini" label-width="90px">
          <el-row style="margin-top: 10px">
            <el-col :span="8"
              ><el-form-item label="运单编号:"
                ><el-input
                  v-model="form.orderWaybillNumber"
                  placeholder="请输入运单编号"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="快递员姓名:">
                <el-input
                  v-model="form.usersUsername"
                  placeholder="请输入快递员姓名"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="发货地址:">
                <el-select
                  v-model="form.orderPaymentStatus"
                  style="width: 100%"
                >
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="已付" value="0"></el-option>
                  <el-option label="未付" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 5px">
            <el-col :span="8"
              ><el-form-item label="收件人姓名:"
                ><el-input
                  v-model="form.orderName"
                  placeholder="请输入收件人姓名"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="作业状态:">
                <el-select v-model="form.taketaskType" style="width: 100%">
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="待提货" value="0"></el-option>
                  <el-option label="在途" value="1"></el-option>
                  <el-option label="已交付" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8"
              ><el-form-item label="选择网点:">
                <el-select v-model="form.selectNet" style="width: 100%">
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="已付" value="0"></el-option>
                  <el-option label="未付" value="1"></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-top: -15px; margin-left: 490px">
              <el-form-item>
                <el-button type="primary" @click="findAll()">查询</el-button>
                <el-button @click="qk()">重置</el-button>
                <el-button>分配快递员</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div id="luo3" class="contentvalue" style="display: none">
        <el-form size="mini" label-width="90px">
          <el-row style="margin-top: 10px">
            <el-col :span="8"
              ><el-form-item label="快递员姓名:">
                <el-input
                  v-model="form.usersUsername"
                  placeholder="请输入快递员姓名"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="发件人姓名:"
                ><el-input
                  v-model="form.orderName"
                  placeholder="请输入发件人姓名"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="选择网点:">
                <el-select v-model="form.selectNet" style="width: 100%">
                  <el-option label="请选择" value=""></el-option>
                  <el-option label="已付" value="0"></el-option>
                  <el-option label="未付" value="1"></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-top: -15px; margin-left: 490px">
              <el-form-item>
                <el-button type="primary" @click="findAll()">查询</el-button>
                <el-button @click="qk()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="main" id="biao1">
      <el-table :data="Table">
        <el-table-column
          label="序号"
          prop="taketaskId"
          width="50"
        ></el-table-column>
        <el-table-column
          label="取件作业编号"
          prop="taketaskNumber"
          width="150"
        ></el-table-column>
        <el-table-column
          label="运单编号"
          prop="networkTmsOrder.orderWaybillNumber"
          width="150"
        ></el-table-column>
        <el-table-column
          label="快递员分配状态"
          prop="taketaskAssignmentStatus"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.taketaskAssignmentStatus == 1 ? "已分配" : "未分配"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="下单时间"
          prop="networkTmsOrder.orderPlacedate"
          width="150"
        ></el-table-column>
        <el-table-column label="作业状态" prop="taketaskType" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.taketaskAssignmentStatus == 0">待分配</span>
            <span v-if="scope.row.taketaskAssignmentStatus == 1"
              >已分配快递员</span
            >
            <span v-if="scope.row.taketaskAssignmentStatus == 2"
              >待人工分配</span
            >
            <span v-if="scope.row.taketaskAssignmentStatus == 3">已取件</span>
            <span v-if="scope.row.taketaskAssignmentStatus == 4"
              >已网点入库</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="快递员姓名"
          prop="luoTackSystemTmsUsers.usersUsername"
          width="100"
        ></el-table-column>
        <el-table-column
          label="发件人姓名"
          prop="networkTmsOrder.orderSenderName"
          width="150"
        ></el-table-column>
        <el-table-column
          label="发件人地址"
          prop="networkTmsOrder.orderSenderAddress"
          width="150"
        ></el-table-column>
        <el-table-column
          label="计划取件时间"
          prop="taketaskPickupTime"
          width="150"
        ></el-table-column>
        <el-table-column
          label="完成时间"
          prop="taketaskCompletionTime"
          width="150"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="HandleSizeChange"
        @current-change="HandleCurrentChange"
        :current-page="form.page"
        :page-sizes="[1, 2]"
        :page-size="form.num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Total"
      >
      </el-pagination>
    </div>
    <div class="main" id="biao2" style="display: none">
      <el-table :data="Table">
        <el-table-column
          label="序号"
          prop="sendtaskId"
          width="50"
        ></el-table-column>
        <el-table-column
          label="派件作业编号"
          prop="sendtaskNumber"
          width="150"
        ></el-table-column>
        <el-table-column
          label="运单编号"
          prop="sendtaskWaybillNumber"
          width="150"
        ></el-table-column>
        <el-table-column label="快递员分配状态" width="150">
          <span>已分配</span>
        </el-table-column>
        <el-table-column
          label="下单时间"
          prop="networkTmsOrder.orderPlacedate"
          width="150"
        ></el-table-column>
        <el-table-column label="作业状态" prop="sendtaskType" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.sendtaskType == 0">待分配</span>
            <span v-if="scope.row.sendtaskType == 1">已分配快递员</span>
            <span v-if="scope.row.sendtaskType == 2">待人工分配</span>
            <span v-if="scope.row.sendtaskType == 3">派送中</span>
            <span v-if="scope.row.sendtaskType == 4">已签收，派送完成</span>
            <span v-if="scope.row.sendtaskType == 5">已拒收，派送完成</span>
          </template>
        </el-table-column>
        <el-table-column
          label="快递员姓名"
          prop="luoTackSystemTmsUsers.usersUsername"
          width="100"
        ></el-table-column>
        <el-table-column
          label="收件人姓名"
          prop="networkTmsOrder.orderSenderName"
          width="150"
        ></el-table-column>
        <el-table-column
          label="收件人电话"
          prop="networkTmsOrder.orderAddresseePhone"
          width="150"
        ></el-table-column>
        <el-table-column
          label="收件人地址"
          prop="networkTmsOrder.orderSenderAddress"
          width="150"
        ></el-table-column>
        <el-table-column
          label="计划取件时间"
          prop="sendtaskStartime"
          width="150"
        ></el-table-column>
        <el-table-column
          label="完成时间"
          prop="sendtaskEndtime"
          width="150"
        ></el-table-column>
        <el-table-column label="签收状态" prop="sendtask_type" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.sendtaskType == 4">已签收</span>
            <span v-if="scope.row.sendtaskType == 5">已拒绝</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="HandleSizeChange"
        @current-change="HandleCurrentChange"
        :current-page="form.page"
        :page-sizes="[1, 2]"
        :page-size="form.num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Total"
      >
      </el-pagination>
    </div>
    <div class="main" id="biao3" style="display: none">
      <el-table :data="Table" id="quxiaobiao">
        <el-table-column
          label="序号"
          prop="taketaskId"
          width="50"
        ></el-table-column>
        <el-table-column
          label="取件作业编号"
          prop="taketaskNumber"
          width="150"
        ></el-table-column>
        <el-table-column
          label="运单编号"
          prop="networkTmsOrder.orderWaybillNumber"
          width="150"
        ></el-table-column>
        <el-table-column
          label="快递员分配状态"
          prop="taketaskAssignmentStatus"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.taketaskAssignmentStatus == 1 ? "已分配" : "未分配"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="下单时间"
          prop="networkTmsOrder.orderPlacedate"
          width="150"
        ></el-table-column>
        <el-table-column
          label="作业状态"
          prop="networkTmsOrder.orderProcessStatus"
          width="150"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.networkTmsOrder.orderProcessStatus == -1">已取消</span>
          </template>
        </el-table-column>
        <el-table-column
          label="快递员姓名"
          prop="luoTackSystemTmsUsers.usersUsername"
          width="100"
        ></el-table-column>
        <el-table-column
          label="发件人姓名"
          prop="networkTmsOrder.orderSenderName"
          width="150"
        ></el-table-column>
        <el-table-column
          label="发件人电话"
          prop="networkTmsOrder.orderSenderPhone"
          width="150"
        ></el-table-column>
        <el-table-column
          label="发件人地址"
          prop="networkTmsOrder.orderSenderAddress"
          width="150"
        ></el-table-column>
        <!-- <el-table-column
          label="计划取件时间"
          prop="taketaskPickupTime"
          width="150"
        ></el-table-column>
        <el-table-column
          label="完成时间"
          prop="taketaskCompletionTime"
          width="150"
        ></el-table-column> -->
      </el-table>
      <el-pagination
        id="quxiaofenye"
        @size-change="HandleSizeChange"
        @current-change="HandleCurrentChange"
        :current-page="form.page"
        :page-sizes="[1, 2]"
        :page-size="form.num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        page: 1,
        num: 2,
        orderWaybillNumber: "",
        usersUsername: "",
        orderName: "",
        orderProvince: "",
        taketaskType: "",
        selectNet: "",
      },
      Total: 0,
      Table: [],
    };
  },
  methods: {
    findallquxiao() {
      this.axios
        .post("/api/network-tms-taketask/NetCancelTheTask", this.form)
        .then((res) => {
      
          this.Table = res.data.list;
          this.form.page = res.data.pageNum;
          this.form.num = res.data.pageSize;
          this.Total = res.data.total;
        });
    },
    findAllsendtask() {
      this.axios
        .post("/api/network-tms-sendtask/NetworkSendContent", this.form)
        .then((res) => {
          this.Table = res.data.list;
          this.form.page = res.data.pageNum;
          this.form.num = res.data.pageSize;
          this.Total = res.data.total;
        });
    },
    findAll() {
      this.axios
        .post("/api/network-tms-taketask/NetworkTakeContent", this.form)
        .then((res) => {
          console.log(res.data)
          this.Table = res.data.list;
          this.form.page = res.data.pageNum;
          this.form.num = res.data.pageSize;
          this.Total = res.data.total;
        });
    },
    k1() {
      document.getElementById("luo1").style.display = "block";
      document.getElementById("luo2").style.display = "none";
      document.getElementById("luo3").style.display = "none";
      document.getElementById("biao2").style.display = "none";
      document.getElementById("biao3").style.display = "none";
      document.getElementById("biao1").style.display = "block";
      this.qk();
      this.Table = [];
      this.findAll();
    },
    k2() {
      document.getElementById("luo1").style.display = "none";
      document.getElementById("luo2").style.display = "block";
      document.getElementById("luo3").style.display = "none";
      document.getElementById("biao2").style.display = "block";
      document.getElementById("biao3").style.display = "none";
      document.getElementById("biao1").style.display = "none";
      this.qk();
      this.Table = [];
      this.findAllsendtask();
    },
    k3() {
      document.getElementById("luo1").style.display = "none";
      document.getElementById("luo2").style.display = "none";
      document.getElementById("luo3").style.display = "block";
      document.getElementById("biao2").style.display = "none";
      document.getElementById("biao3").style.display = "block";
      document.getElementById("biao1").style.display = "none";
      this.qk();
      this.Table = [];
      this.findallquxiao();
      // document.getElementById("quxiaobiao").style.top="-100px";
      // document.getElementById("quxiaofenye").style.marginTop="-100px";
    },
    qk() {
      this.form.page = 1;
      this.form.num = 2;
      this.form.orderWaybillNumber = "";
      this.form.usersUsername = "";
      this.form.orderName = "";
      this.form.orderProvince = "";
      this.form.taketaskType = "";
      this.form.selectNet = "";
    },
    ckxq() {},
    HandleSizeChange(val) {
      this.form.num = val;
      this.findAll();
    },
    HandleCurrentChange(val) {
      this.form.page = val;
      this.findAll();
    },
  },
  created() {
    this.findAll();
  },
};
</script>
<style>
.heder {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.operation-item[data-v-31e41a20] {
  width: 120px;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  color: #20232a;
  cursor: pointer;
}
.heder {
  background-color: aliceblue;
  width: 100%;
  height: 60px;
}
.operation-item [data-v-31e41a20] {
  background: #ffeeeb;
  color: #e15536;
}
.heder {
  transform: translateY(-50%); /**上移元素**/
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.contentvalue {
  transform: translate(-40%, 90%);
}
.main {
  transform: translate(0%, 25%);
  width: 100%;
  height: 500px;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;

  height: 6px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;

  border-radius: 3px;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #d5d5d5;
  border-radius: 5px;
}
</style>  